<template>
  <div class="container">
    <div class="item">
      <el-card class="box-card" style="margin-top: 0px">
        <el-row :gutter="20">
          <el-col :span="0"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="20"><div class="grid-content bg-purple">

            <el-form
              ref="queryForm"
              :model="queryParams"
              size="small"
              label-width="200px"
            >
              <el-col :span="18">
                <el-form-item label="订单号 / Order No" prop="searchContent">
                  <el-input
                    v-model="queryParams.searchContent"
                    placeholder="请输入订单号"
                    clearable
                    @clear="handleClear"
                    style="width: 100px;"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="small"
                  @click="handleSearch"
                >搜索 / Search</el-button>
              </el-col>
            </el-form>
          </div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        </el-row>

      </el-card>
    </div>
    <div class="item" v-if="activeTableTab">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单流程 / Order Flow</span>
        </div>
        <div class="step-simple" style="width:100%">
          <el-steps :space="300" :active="activeStep" finish-status="success" process-status="success">
            <el-step  :key="index" v-for="(item ,index) in statusList">
              <template slot="title">
                <p style="margin: 0">{{item.stepName}}</p>
                <p style="margin: 0">{{item.stepNameEn}}</p>
              </template>
            </el-step>
          </el-steps>
        </div>
      </el-card>


    </div>
    <div class="item" v-if="activeTableTab">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单详情 / Order Detail</span>
        </div>
        <el-descriptions title="">

          <el-descriptions-item label="客户">{{orderDetail.customer}}</el-descriptions-item>
          <el-descriptions-item label="机型">{{orderDetail.deviceType}}</el-descriptions-item>
          <el-descriptions-item label="数量">{{orderDetail.quantity}}</el-descriptions-item>
          <el-descriptions-item label="订单号">{{orderDetail.orderNo}}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{orderDetail.created}}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{orderDetail.updated}}</el-descriptions-item>


        </el-descriptions>
      </el-card>

    </div>
    <div class="item" v-if="activeTableTab" style="height: 50%;overflow-y: auto">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单动态 / Order Dynamics</span>
        </div>

      <el-steps direction="vertical" :active="activeStep" process-status="success">
        <el-step :title="item.name" :key="index" v-for="(item ,index) in statusList">
          <template slot="description">
            <div>
              <div class="flex-container">
                <div class="flex-item">
                  <div>{{ getStepTime(item.id) }}</div>
                </div>
              </div>
            </div>
          </template>
        </el-step>
      </el-steps>

      </el-card>
    </div>
  </div>
</template>

<script>
import {getTaskStatus, searchOrder} from "@/api/project/order";

export default {
  data() {
    return {

      getActive(id) {
        return this.orderDetail.actList.some(item => item.tfsId === id);
      },
      getStepTime(id) {
        const actItem = this.orderDetail.actList.find(item => item.tfsId === id);
        if (actItem) {
          return actItem.updateTime;
        } else {
          return '----------';
        }
      },
      orderDetail: {},
      activeStep: 0,
      activeTableTab: false,
      statusList: [],
      searchData: {},
      queryParams: {
        searchContent: ''
      },
      formOption: {
        emptyBtn: false,
        menuPosition: 'left',
        submitBtn: true,
        clearBtn: true,
        column: [
          {
            label: '订单号',
            prop: 'searchContent',
            span: 8,
            rules: [{
              required: true,
              message: "请输入订单号",
              trigger: "blur"
            }]
          }
        ]
      }
    };
  },
  created() {
    this.taskSteps();
    // this.handleSearch();
  },

  mounted() {
    const deviceInfo = this.checkDeviceType();
    console.log('设备信息:', deviceInfo);

    if (deviceInfo.isMobile) {
      console.log('这是移动设备');
      if (deviceInfo.isAndroid) {
        console.log('这是Android设备');
        // 设置body样式
        document.body.classList.add('special-page-body');
        // 或者直接设置样式
        // document.body.style.width = '500px';
        document.body.style.zoom = '50%';
        document.body.style.margin = '0 auto';
        // document.body.style.backgroundColor = '#f5f5f5';
      } else if (deviceInfo.isIOS) {
        console.log('这是iOS设备');
      }
    } else {
      console.log('这是PC端');
    }
  },

  methods: {
    checkDeviceType() {
      const userAgent = navigator.userAgent;

      // 检测移动设备
      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);

      // 单独检测Android
      const isAndroid = /Android/i.test(userAgent);

      // 单独检测iOS
      const isIOS = /iPhone|iPad|iPod/i.test(userAgent);

      return {
        isMobile,
        isPC: !isMobile,
        isAndroid,
        isIOS,
        userAgent
      };
    },

    checkStatus(stepId) {
      for (let i = 0; i < this.statusList.length; i++) {
        var statusItem = this.statusList[i];
        if (statusItem.id === stepId) {
          this.activeStep = i;
          break
        }
      }
    },
    taskSteps() {
      getTaskStatus().then(res => {
        console.log("zzzzzz", res.data.data);
        this.statusList = res.data.data;
        for (let i = 0; i < this.statusList.length; i++) {
          this.statusList[i].index = i;
        }
      })


    },

    handleClear() {
      this.activeTableTab = false;
    },
    handleSearch() {
      searchOrder(this.queryParams).then(res => {
        this.orderDetail = res.data.data;
        console.log("hhhhh", this.orderDetail)
        if (this.orderDetail.id) {
          this.activeTableTab = true;
          this.checkStatus(this.orderDetail.tfsId);
        } else {
          this.activeTableTab = false;
        }
      })
    },
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;  /* 纵向排列 */
  align-items: center;     /* 整体水平居中 */
  /*overflow-y: auto;*/
  height: 95%;
}

.item {
  width: 200px;           /* 固定宽度或 max-width */
  padding: 10px;
  margin: 5px 0;
  /* background: #f0f0f0;*/
   text-align: left;       /* 内容左对齐 */
}.container {
   display: flex;
   flex-direction: column;  /* 纵向排列 */
   align-items: center;     /* 整体水平居中 */
 }

.item {
  width: 70%;           /* 固定宽度或 max-width */
  padding: 2px;
  margin: 5px 0;
  background: #f0f0f0;
  text-align: left;       /* 内容左对齐 */
}
</style>
